<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用requestAnimationFrame制作进度条</title>
    <style>
      .title {
        text-align: center;
        width: 100%;
      }
      .container {
        width: 400px;
        margin: 30px auto;
      }
      img {
        width: 25px;
        height: 25px;
        position: absolute;
        bottom: 10px;
        left: -10px;
      }
      .wrap {
        height: 6px;
        border-radius: 5px;
        padding: 2px;
        position: relative;
        background-color: #31493c;
      }
      .box {
        height: 6px;
        background-color: #b3efb2;
        border-radius: 3px;
      }
      .row {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        cursor: pointer;
        margin: 0 10px;
      }
    </style>
    <style>
      .box1 {
        height: 6px;
        background-color: #b3efb2;
        border-radius: 3px;
      }
      .row1 {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn1 {
        cursor: pointer;
        margin: 0 10px;
      }
    </style>
  </head>
  <body>
    <p class="title">使用requestAnimationFrame制作进度条</p>
    <div class="container">
      <div class="wrap">
        <img class="point1" id="point1" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22dcb4c654674ad6b50541ac07103b34~tplv-k3u1fbpfcp-watermark.image" alt="" />
        <div class="box1" id="box1"></div>
      </div>
      <div class="row1">
        <div class="txt1"><span id="txt1">0</span>%</div>
        <div class="btn1" id="btn1">暂停</div>
      </div>
    </div>

    <p class="title">使用setInterval制作进度条</p>
    <div class="container">
      <div class="wrap">
        <img class="point" id="point" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22dcb4c654674ad6b50541ac07103b34~tplv-k3u1fbpfcp-watermark.image" alt="" />
        <div class="box" id="box"></div>
      </div>
      <div class="row">
        <div class="txt"><span id="txt">0</span>%</div>
        <div class="btn" id="btn">暂停</div>
      </div>
    </div>
    <script>
      let box = document.getElementById('box');
      let btn = document.getElementById('btn');
      let point = document.getElementById('point');
      let handel = 0;
      let $width = 0;
      let left = -10;
      function setWidth(params) {
        handel = setInterval(() => {
          box.style.width = $width + 'px';
          point.style.left = $width + left + 'px';
          if ($width <= 396) {
            $width += 2;
          } else {
            btn.style.display = 'none';
            window.clearInterval(handel);
          }
          document.getElementById('txt').innerText = Math.ceil(($width / 400) * 100);
        }, 16);
      }
      setWidth();
      btn.addEventListener(
        'click',
        function () {
          if (handel) {
            window.clearInterval(handel);
            handel = 0;
            btn.innerText = '播放';
          } else {
            setWidth();
            btn.innerText = '暂停';
          }
        },
        false
      );
    </script>
    <!-- <script>
      let box1 = document.getElementById('box1');
      let btn1 = document.getElementById('btn1');
      let point1 = document.getElementById('point1');
      let handel1 = 0;
      let $width1 = 0;
      let left1 = -10;
      function setWidth1(params) {
        box1.style.width = $width1 + 'px';
        point1.style.left = $width1 + left1 + 'px';
        handel1 = window.requestAnimationFrame(setWidth1);
        $width1 <= 396 ? ($width1 += 2) : (btn1.style.display = 'none') && window.cancelAnimationFrame(handel1);
        document.getElementById('txt1').innerText = Math.ceil(($width1 / 400) * 100);
      }
      setWidth1();
      btn1.addEventListener(
        'click',
        function () {
          if (handel1) {
            window.cancelAnimationFrame(handel1);
            handel1 = 0;
            btn1.innerText = '播放';
          } else {
            setWidth1();
            btn1.innerText = '暂停';
          }
        },
        false
      );
    </script> -->
  </body>
</html>
